<template>
  <div class="entityModel">
    <div class="topBtn">
      <div style="display: flex">
        <el-button
          type="primary"
          icon="el-icon-plus"
          style="background: #2f54eb"
          size="small"
          @click="() => handleOperate()"
          >新增</el-button>
        <el-button icon="el-icon-s-data" @click="handleOrginLoading" size="small"
          >从数据库加载</el-button>
        <el-button
          icon="el-icon-delete"
          type="danger"
          @click="() => handleDelete()"
          :disabled="!deleteList.length"
          size="small"
          >删除</el-button>
      </div>
      <el-input
        placeholder="请输入关键字"
        v-model="queryParams.keyword"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          type="primary"
          style="background: #2f54eb"
          @click="getList"
        ></el-button>
      </el-input>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange"
        size="mini"
        v-loading="loading"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="date" label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="tableName" label="表名称" align="left">
        </el-table-column>
        <el-table-column prop="remark" label="表描述" align="left">
        </el-table-column>
        <el-table-column
          prop="dataSource"
          label="数据源"
          align="center"
          :formatter="() => '本地数据源'"
        >
        </el-table-column>
        <el-table-column
          prop="entityTableStatus"
          label="实体表状态"
          align="center"
          width="120"
          :formatter="
            (row) =>
              row.entityTableStatus
                ? selectDictLabel(
                    dict.type.pt_app_entity_status,
                    row.entityTableStatus
                  )
                : '--'
          "
        >
        </el-table-column>
        <!-- <el-table-column prop="sort" label="排序" align="center" width="120">
        </el-table-column> -->
        <el-table-column prop="operate" label="操作" align="center">
          <template slot-scope="scope"
            ><div>
              <el-button type="text" @click="handleOperate(scope.row)"
                >编辑</el-button
              ><el-button type="text" @click="() => handleDelete(scope.row)" style="color:red"
                >删除</el-button
              >
              <el-dropdown
                placement="bottom"
                @command="(value) => generateEr(scope.row, value)"
              >
                <el-button type="text"
                  >更多<i class="el-icon-arrow-down"></i
                ></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1"
                    >生成ER模型和表单模型及页面模型</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <addOrEditModal
      :open="open"
      :close="close"
      :getList="getList"
      :row="row"
      v-if="open"
      :appId="appId"
      :tablePrefix="tablePrefix"
    />
        <import-table ref="import" @ok="handleSave"  type="dataModel" :tablePrefix="tablePrefix"/>
  </div>
</template>

<script>
import addOrEditModal from "./addOrEditModal.vue";
import importTable from "@/views/tool/gen/importTable.vue";
import {
  getOnlineList,
  deleteOnlineTableInfo,
  oneTouch,
  deleteMore,
  insertAppTableInfo
} from "@/api/app/dataModel/entityModel";
export default {
  name: "entityModel",
  components: {
    addOrEditModal,
    importTable
  },
  dicts: ["pt_app_entity_status"],
  props: {
    appId: {
      type: String,
      default: "",
    },
     tablePrefix:{
      type: String,
      default: "",
    }
  },
  data() {
    return {
      loading: true,
      multipleSelection: [],
      total: 0,
      queryParams: { keyword: undefined, pageNum: 1, pageSize: 10 },
      row: undefined,
      open: false,
      tableData: [],
      deleteList: [],
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    async handleSave(value){
      const res = await insertAppTableInfo({tableName:value,appId:this.appId})
      if(res.code === 200){
        this.$message.success('加载成功')
        this.$refs.import.close();
        this.getList()
      }
      
    },
    close(){
      this.open = false
      this.getList()
    },
    async getList() {
      this.loading = true;
      const res = await getOnlineList({
        ...this.queryParams,
        appId: this.appId,
      });
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
      this.loading = false;
    },
    handleDelete(row) {
      if (row) {
        this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await deleteOnlineTableInfo({
              tableName: row.tableName,
            });
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          })
          .catch(() => {});
      } else {
        this.$confirm("此操作将永久删除选中数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const ids = [];
            this.deleteList.forEach((item) => ids.push(item.id));
            console.log(ids);
            const res = await deleteMore(ids.toString());
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.getList();
            }
          })
          .catch(() => {});
      }
    },
    handleOrginLoading() {
      this.$refs.import.show();
    },
    handleSelectionChange(row) {
      this.deleteList = row;
    },
    handleOperate(row) {
      this.row = row;
      this.open = true;
    },
    generateEr(row, type) {
      if (type === "1") {
        this.$confirm("确认生成ER模型和表单模型及页面模型吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            const res = await oneTouch({
              tableName: row.tableName,
              appId: this.appId,
            });
            if (res.code == 200) {
              this.$message.success(res.msg);
            }
          })
          .catch(() => {});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.entityModel {
  .topBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    ::v-deep .input-with-select {
      width: 300px;
    }
    ::v-deep .el-icon-search {
      color: #fff;
    }
  }
  .table {
    margin-top: 8px;
  }
  .pagination {
    height: 50px;
  }
}
</style>
